<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-03 22:57:27
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-06 23:20:24
 * @FilePath: /chat-ai-plus/src/components/Models/Models.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="models-container">
    <div class="heading weight_bolder">{{ $t('app.models.heading') }}</div>
    <div class="models-container mt_sm" >
      <label class="model-label" v-for="item in modelList" :key="item.value" @click="handleChange(item)">
        
        <view
          class="model-item"
          :class="{ active: model.value === item.value }"
        >
          <u-image
            width="28px"
            height="28px"
            :src="`/static/images/${item.icon}@2x.png`"
            shape="circle"
          ></u-image>
          <div>{{ item.name }}</div>
        </view>
      </label>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import useChatStore from '@/store/modules/chat';
const modelList = [
  {
    id: 1,
    icon: 'GPT3',
    name: 'GPT-3.5',
    value: 'GPT-3.5',
    description: 'Default chatbot model provided by OpenAl.',
    version: 1,
    enable: true,
  },
  {
    id: 2,
    icon: 'GPT4',
    name: 'GPT-4',
    value: 'GPT-4',
    description: 'A more advanced system, producing safer and more useful',
    version: 2,
    enable: false,
  },
  {
    id: 3,
    icon: 'DALLE',
    name: 'DALL·E',
    value: 'DALL·E',
    description: 'A creative and helpful collaborator, developed b',
    version: 3,
    enable: false,
  },
];

export default defineComponent({
  name: 'Models',
  setup() {
    const chatStore = useChatStore();

    const model = computed(() => chatStore.currentModel);
    const handleChange = ( item ) => {
      chatStore.clearConversations();
      chatStore.setCurrentRoom();
      chatStore.toggleModel(item.value);
    };

    return {
      model,
      handleChange,
      modelList: [...modelList],
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.models-container {
  $size: map-get($spaces, sm);
  .model-label {
    display: block;
    & + .model-label {
      margin-top: $size;
    }
  }
  .model-item {
    display: flex;
    align-items: center;
    border-radius: $radius;
    border: solid 1px map-get($border-colors, default);
    padding: map-get($spaces, xs);
    gap: $size;
  }
  .model-item.active {
    background: map-get($theme-colors, primary);
    color: $white-color;
    border-color: map-get($theme-colors, primary);
  }
}
</style>
